<template>
<el-card style="width: 500px;">
  <div style="font-size: 18px;font-weight: bold;margin-bottom: 15px">
    个人信息
    <span v-if="userStore.userInfo.status == 1"><el-tag type="success">已认证</el-tag></span>
    <span v-else-if="userStore.userInfo.status == 0"><el-tag type="danger">未认证</el-tag><el-link style="margin-left: 10px" @click="addDialogShow=true">实名认证</el-link></span>
  </div>
  <el-form  label-width="auto" style="max-width: 600px">
    <el-form-item label="用户名">
      <el-input v-model="userInfo.username" disabled style="width: 200px;"/>
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="userInfo.sex">
        <el-radio label="男" :value="男"/>
        <el-radio label="女" :value="女"/>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="电话">
      <el-input v-model="userInfo.phone"  style="width: 200px;"/>
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="userInfo.email"  style="width: 200px;"/>
    </el-form-item>
    <el-form-item>
      <div style="margin-left: 10px"><span style="color: red">余额</span>：￥{{userInfo.money}}元</div>
    </el-form-item>
    <el-form-item>
      <el-button type="success" plain @click="update(userInfo)">提交</el-button>
    </el-form-item>
  </el-form>
</el-card>

  <!-- 认证框开始 -->
  <el-dialog v-model="addDialogShow" title="实名认证" width="500">
    <el-form>
      <el-form-item label="真实姓名" label-width="20%">
        <el-input v-model="realInfo.realname" placeholder="请输入真实姓名" autocomplete="off" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="身份证号码" label-width="20%">
        <el-input v-model="realInfo.idCard" placeholder="请输入身份证号码" autocomplete="off" style="width: 300px"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogShow = false">
          取消
        </el-button>
        <el-button type="primary" @click="update(realInfo)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 认证框结束 -->
</template>

<script setup>
import {useUserStore} from "@/stores/user.js";
import {ref} from "vue";
import userApi from "@/api/userApi.js";
import {ElMessage} from "element-plus";
import {Plus} from "@element-plus/icons-vue";
const userStore = useUserStore();
const userInfo = ref({
  id:userStore.userInfo.id,
  username:userStore.userInfo.username,
  sex:userStore.userInfo.sex,
  phone:userStore.userInfo.phone,
  email:userStore.userInfo.email,
  money:userStore.userInfo.money
})

const realInfo = ref({
  id:userStore.userInfo.id,
  idCard:userStore.userInfo.idCard,
  realname:userStore.userInfo.realname,
  status:1
})
//认证对话框是否显示
const addDialogShow = ref(false)

//修改基本信息
function update(info){
  userApi.update(info)
      .then(resp => {
        if(resp.code == 10000){
          ElMessage.success(resp.msg);
          addDialogShow.value=false
          getInfo()
        }else {
          ElMessage.error(resp.msg);
        }
      })
}

//获取用户信息
function getInfo(){
  userApi.getInfo()
      .then(resp => {
        if(resp.code == 10000){
          //将已登录的用户信息保存在pinia中
          userStore.updateUser(resp.data)
        }
      })
}
</script>

<style scoped>

</style>